<template>
  <div class="ivu-mt">
      <Card dis-hover :bordered="false">
    <Form inline>
      <FormItem>
        <DatePicker type="month" v-model="date" placeholder="请选择月份"></DatePicker>
      </FormItem>
    </Form>
    <Table :columns="columns" :data="data" row-key="id" :loading="loading"></Table>
      </Card>
  </div>
</template>
<script>
    export default {
        data () {
            return {
                date: '',
                columns: [
                    {
                        title: '项目',
                        key: 'project',
                    },
                    {
                        title: '就诊患者数',
                        key: 'patient'
                    },
                    {
                        title: '待完善',
                        key: 'perfect'
                    },
                    {
                        title: '完善率',
                        key: 'proportion'
                    }
                ],
                data: [],
                loading: ''
            }
        },
        methods: {
            perfectData () {
                this.loading = true;
                setTimeout(() => {
                    let data = [];
                    for (let i = 1; i < 10; i++) {
                        data.push({
                            project: '项目' + i,
                            patient: Math.round(Math.random() * 1000),
                            perfect: Math.round(Math.random() * 500),
                            proportion: Math.round(Math.random() * 100) + '%'
                        })
                    }
                    this.data = data;
                    this.loading = false;
                }, 1000)
            }
        },
        mounted () {
            this.perfectData()
        }
    }
</script>
